@charset 'utf-8';
$font-size:20px;
@function l($px){
    @return $px/$font-size*(640/640)*1rem;
}
html{
    font-size: $font-size;
}
html,body{
    width: 100%;
    height: 100%;
}
.web{
    width: 100%;
    min-height: 100%;
    background: url(../images/diwen.png);
    box-sizing: border-box;
    padding-top: l(36px);
    position: relative;
    .top{
        width: l(89px);
        height: l(37px);
        background: #e7c598;
        border-radius: l(10px);
        text-align: center;
        line-height: l(37px);
        color: #BF0C21;
        font-size: l(23px);
        cursor: pointer;
        margin-left: l(46px);
    }
    .map{
        margin-top: l(-35px);
        position: relative;
        width: l(490px);
        height: l(411px);
        margin-left: l(75px);
        display: none;
        img{
            width: 100%;
            height: 100%;
        }
        .icon1,.icon2{
            background: url(../images/icon.png);
            width: l(67px);
            height: l(89px);
            font-size: l(14px);
            color: #BF0C21;
            box-sizing: border-box;
            padding: l(16px) 0 l(12px) l(12px);
            position: absolute;
            em{
                font-size: l(18px);
            }
        }
        .icon1{
            top: l(-14px);
            left: l(370px);
        }
        .icon2{
            top: l(266px);
            left: l(117px);
        }
    }
    .map1{
        display: block;
        width: l(535px);
        height: l(408px);
        margin-top: l(25px);
        position: relative;
        margin-left: l(51px);
        img{
            width: 100%;
            height: 100%;
        }
        .icon1,.icon2,.icon3{
            width:l(67px);
            height: l(89px);
            background: url(../images/icon.png);
            position: absolute;
             font-size: l(14px);
            color: #BF0C21;
            box-sizing: border-box;
            padding: l(16px) 0 l(12px) l(12px);
            position: absolute;
            em{
                font-size: l(18px);
            }
        }
        .icon1{
            left: l(270px);
            top: l(-43px);
        }
        .icon2{
            left: l(42px);
            top: l(173px);
        }
        .icon3{
            left: l(136px);
            top: l(170px);
        }
    }
    .content{
        text-align: right;
        color: #E7C598;
        margin-top: l(-142px);
        box-sizing: border-box;
        padding-right: l(28px);
        .one{
            font-size: l(29px);
            em{
                font-size: l(40px);
            }
        }
        .two{
            font-size: l(40px);
            margin-top: l(13px);
        }
        .three{
            font-size: l(28px);
            margin-top: l(11px);
        }
    }
    .bottom{
        
        margin-top: l(5px);
        box-sizing: border-box;
        padding-left: l(55px);
        padding-right: l(55px);
    }
    .text{
        .big{
            font-size: l(26px);
            color: #E7C598;
        }
        .small{
            font-size: l(17px);
            color: #E7C598;
            line-height: 1.5rem;
        }
        p{
            margin-top: l(16px);
        }
    }
    .img{
        display: block;
        width: l(320px);
        height: l(45px);
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: l(64px);
        img{
            width: 100%;
            height: 100%;
        }
    }
    .return{
        width: l(41px);
        height: l(41px);
        border-radius: 50%;
        background: #e7c598;
        text-align: center;
        line-height: l(41px);
        position: absolute;
        right: l(56px);
        bottom: l(25px);

        .iconfont{
            font-size: l(28px);
            color: #bf0c21;
        }
    }
    
    
    
    
}
